<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-eightapp__eiparkinginfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getList()">
        <el-form-item>
          <el-input v-model="dataForm.parkId" placeholder="输入停车场编号查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getList()"></el-button>
        </el-form-item>
        <div class="eupdiv">
          <el-tag class="euptag1" v-for="item in items" :key="item.label" :type="item.type" effect="dark">{{ item.label }}</el-tag>
        </div>
      </el-form>



      <el-row class="euprow" type="flex" v-for="l in this.parkList" :key="l[0].parkingId">
        <el-col class="eupcol" :span="2" v-for="item in l" :key="item.parkingId">
          <div class="tag-group">
            <el-tag class="euptag"
                    v-show="item.parkingId==-1"
                    type="warning"
                    effect="dark">
              入口
            </el-tag>
            <el-tag class="euptag"
                    v-show="item.parkingId>0 && item.state==0"
                    type=""
                    effect="dark">
              {{ item.parkingId }}<br><br><br><br>
              <el-button v-if="$hasPermission('eightapp:eiuseparkinginfo:save')" type="success" size="small"
                         @click="adddate(item)">{{ $t('add') }}
              </el-button>
            </el-tag>
            <el-tag class="euptag"
                    v-show="item.parkingId>0 && item.state==1"
                    type="success"
                    effect="dark">
              {{ item.parkingId }}
              <br>
              租户姓名<br>
              {{ item.name }}<br>
              <span id="font">{{ time(item.starttime) }}<br>{{ time(item.endtime) }}</span><br>
              <el-button v-if="$hasPermission('eightapp:eiuseparkinginfo:update')" type="primary" size="small"
                         @click="addOrUpdateHandle(item.useid)">{{ $t('update') }}
              </el-button>
              <br>
              <el-button v-if="$hasPermission('eightapp:eiuseparkinginfo:delete')" type="danger" size="small"
                         @click="deletePark(item.useid)">{{ $t('delete') }}
              </el-button>
            </el-tag>
            <el-tag class="euptag"
                    v-show="item.parkingId==-2"
                    type="warning"
                    effect="dark">
              出口
            </el-tag>
            <el-tag class="euptag"
                    v-if="item.parkingId==0"
                    v-show="false"
                    color="white"
                    effect="plain"
            >
            </el-tag>
          </div>
        </el-col>
      </el-row>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></add-or-update>
    </div>
  </el-card>


</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './eiuseparkinginfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/eightapp/eiuseparkinginfo/page',
        getDataListIsPage: true,
        exportURL: '/eightapp/eiuseparkinginfo/export',
        deleteURL: '/eightapp/eiuseparkinginfo',
        deleteIsBatch: true
      },
      dataForm: {
        parkId: '',
      },
      parkList: {},
      items: [
        { type: 'warning', label: '出入口' },
        { type: '', label: '未出租车位' },
        { type: 'success', label: '已出租车位' }
      ]
    }
  },
  components: {
    AddOrUpdate
  },
  methods: {
    init(dataList) {
      this.visible = true
      console.log(dataList)
    },
    getList() {
      this.parkList = [];
      this.$http.get(`/eightapp/eiparkinginfo/${this.dataForm.parkId}`).then(({data: res}) => {
        console.log(res);
        this.parkList = res;

      }).catch(() => {
      })
    },
    time(times) {
      return String(times).substring(0, 10)
    },
    deletePark(id) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/eightapp/eiuseparkinginfo/${id}`).then(({data: res}) => {
          this.getList()
        }).catch(() => {
        })
      })
    }
  }
}
</script>

<style>

.euptag {
  width: 100px;
  height: 220px;
  font-size: 15px;
  text-align: center;
}

.eupcol {
  min-width: 100px;
}

.euprow {
  margin-top: 80px;
}

#font {
  font-size: 1px;
}

.tag-group {
  width: 100px;
  height: 150px;
}

.eupdiv {
  width: 700px;
  height: 50px;
  float: right;
}

.euptag1 {
  margin-left: 10px;
  width: 150px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}

</style>
